<template>
    <div class="rank_info">
        <app-header :title="title" style="position: sticky; top: 50px; z-index: 3;" />
        <div class="cover">
            <img v-lazy="cover"/>
            <div class="rank-info-time">
                <span>上次更新时间：</span>
                {{updataTime}}
            </div>
        </div>
        <van-list class="list">
            <song-item
                v-for="(item, index) in list"
                :key="item"
                :hash="item.hash"
                class="item"
            >
                <template #title>
                    <div class="title">
                        <van-badge class="badge" :content="index+1" />
                        {{item.filename}}
                    </div>
                </template>
            </song-item>
        </van-list>
        <app-footer />
    </div>
</template>

<script>
import AppHeader from 'Components/AppHeader.vue'
import SongItem from 'Components/SongItem'
import AppFooter from 'Components/AppFooter'
import { ref, onBeforeMount } from 'vue'
import { getRankListDetails } from 'Api/rank'
import { createImageUrl } from 'Utils/utils'
export default {
    name: 'RankInfo',
    components: {
        AppHeader,
        SongItem,
        AppFooter
    },
    props: ['rankid'],
    setup (props) {
        const title = ref('')
        const cover = ref('')
        const updataTime = ref('')
        const list = ref([])

        onBeforeMount(async () => {
            const rankid = props.rankid
            const data = await getRankListDetails(rankid)
            const info = data.info
            title.value = info.rankname
            cover.value = createImageUrl(info.banner7url)
            let time = info.update_frequency
            const date = new Date()
            time = time === '每天' ? `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}` : time
            updataTime.value = time
            list.value = data.songs.list
        })

        return {
            title,
            cover,
            updataTime,
            list
        }
    }
}
</script>

<style lang="scss" scoped>
.cover {
    position: relative;
    display: flex;
    align-items: center;
    height: 240px;
    margin-top: -50px;
    overflow: hidden;
    img {
        width: 100%;
    }
    .rank-info-time {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50px;
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
        color: #fff;
        line-height: 50px;
        text-indent: 1rem;
    }
}
.list {
    .item {
        .title {
            line-height: 22px;
            .badge {
                padding: 1px 8px;
                background: transparent;
                border: none;
                color: #999;
                margin-right: 5px;
            }
        }
        &:nth-child(1) {
            .title .badge {
                background: #e80000;
                color: #fff;
            }
        }
        &:nth-child(2) {
            .title .badge {
                background: #ff7200;
                color: #fff;
            }
        }
        &:nth-child(3) {
            .title .badge {
                background: #f8b300;
                color: #fff;
            }
        }
    }
}
.item {
    .title {
        line-height: 22px;
        .badge {
            padding: 1px 8px;
            background: transparent;
            border: none;
            color: #999;
        }
    }
}
</style>
